<template>

    <div class="Right-box">
       
       <router-link to="../Classify01/001">
         <div class="map01">
                 <img src="/imgszn/0基础插画.jpg" alt="">
         </div>
         </router-link>
           <router-link to="../Classify01/002">
         <div class="map02">
             <img src="/imgszn/3天.jpg" alt="">
         </div>
           </router-link>
        <div class="map03" v-for="course in courses" :key="course.id">
            
            <section>
                 <router-link :to="'/Classify02/'+course.id">
                <img :src="course.img">
                  </router-link>
            </section>
            
            <section>
                <span>
                {{course.h1}}
            </span>
            <p>
                 {{course.p}}
            </p>
            </section>
           
        </div>
      
    </div>
        
</template>

<script>



export default {
    name:"Right",
    props:{
             type:String
         },
    data(){
        return {
          courses:[]
        }
      
    
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/courses",true);
        xhr.onreadystatechange = () =>{
            if(xhr.readyState ==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.courses = JSON.parse(xhr.responseText);
            }
        }
        xhr.send()
    },
}
</script>

<style scoped>
.Right-box{
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.map01{
    width: 90%;
    height: 0.7rem;
    border-radius: 8%;
    margin: auto;
    margin-top: .1rem;
}
.map01 img{
    width: 100%;
    height: 100%;
    border-radius: 8%;
}
.map02{
    width: 90%;
    height: 0.7rem;
    border-radius: 8%;
    margin: auto;
    margin-top: 0.2rem;
}
.map02 img{
    width: 100%;
    height: 100%;
    border-radius: 8%;
}
.map03{
      width: 90%;
    height: 0.7rem;
    border-radius: 8%;
    margin: auto;
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between;
}
.map03 section{
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.map03 section p{
    font-size: .12rem;
    color: rgb(134, 132, 132);
}
.map03 section span{
    font-weight: bold;
}
.map03 section img{
    width: 100%;
    height: 100%;
}
</style>
